import { createStyles } from 'antd-style';
import { Flex } from 'antd';
import { motion } from 'framer-motion';
import { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';

const useStyle = createStyles(({ css }) => {
  return {
    wrapper: css`
      border-radius: 8px;
      border: 1px solid var(--ycx-container-border-color);
      background: var(--ycx-container-bg-color);
      box-shadow: 0 8px 12px 0 rgba(119, 130, 153, 0.08);
      backdrop-filter: blur(4px);
      position: absolute;
      z-index: 1;
      left: 352px;
      top: 24px;
      right: 32px;
      padding: 0 24px;
    `,
    bar: css`
      position: absolute;
      left: 0;
      bottom: 0;
      width: 48px;
      height: 2px;
      background-color: var(--ycx-primary-color);
    `,
  };
});

export interface Tab {
  label: string;
  value: number;
  toolKits?: ReactNode[];
}

type Props = {
  tabs: Tab[];
  activeKey: number;
  onChange: (key: number) => void;
};

const ToolBar: FC<PropsWithChildren<Props>> = ({ tabs, activeKey, onChange, children }) => {
  const { styles } = useStyle();
  const [xVal, setXVal] = useState(activeKey * 72);

  const handleTabClick = (index: number) => {
    onChange(index);
  };

  useEffect(() => {
    setXVal(72 * activeKey);
  }, [activeKey]);

  return (
    <Flex className={`${styles.wrapper} text-xs`} justify="space-between" align="center">
      <Flex gap={24} className="relative h-full">
        {tabs.map((item) => (
          <div
            key={item.value}
            className="cursor-pointer select-none py-4"
            style={{
              color:
                activeKey === item.value ? 'var(--ycx-font-color-l1)' : 'var(--ycx-font-color-l3)',
            }}
            onClick={() => handleTabClick(item.value)}
          >
            {item.label}
          </div>
        ))}

        <motion.div
          className={styles.bar}
          animate={{ x: xVal }}
          transition={{
            type: 'spring',
            stiffness: 600,
            damping: 40,
          }}
        />
      </Flex>

      <div>{children}</div>
    </Flex>
  );
};

export default ToolBar;
